<template>
    <div class="large-domain" ref="minPage">
        <div class="panel-title"><span class="panel-title-word">专家领域分布</span></div>
        <div id="domainChart"></div>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    pieData: any[] = [];
    chart: any = null;
    mounted() {
        echartLoad(() => {
            const colors = ["#27A6FF", "#F1516D", "#2F65F3", "#85C8E2", "#294482"];
            let pieData = this.pageData.map((item) => {
                return {
                    value: item.percentage,
                    name: item.name,
                };
            });
            let total = 0;
            pieData.forEach((item) => {
                total += item.value;
            });
            this.pieData = pieData.map((item, idx) => {
                return {
                    ...item,
                    rate: toDecimalNoZero((item.value / total) * 100),
                    color: colors[idx % 5],
                    itemStyle: { color: colors[idx % 5] },
                };
            });
            console.info(this.pieData);
            setTimeout(() => {
                this.setChart();
            }, 500);
        });
    }

    currentIndex = -1;
    timer = null;

    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }

        // 启动定时器（每 2 秒切换一次）
        let timer = setInterval(this.autoHighlight, 3000);

        // 鼠标悬停时暂停自动切换
        this.chart.on("mouseover", () => clearInterval(timer));
        this.chart.on("mouseout", () => {
            timer = setInterval(this.autoHighlight, 3000);
        });
    }
    autoHighlight() {
        const dataLen = this.pieData.length;
        // 取消之前的高亮
        this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 计算下一个索引
        this.currentIndex = (this.currentIndex + 1) % dataLen;
        // 高亮当前数据项
        this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 显示 Tooltip
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("domainChart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            legend: {
                orient: "vertical",
                right: 60,
                top: "center",
                bottom: 20,
                data: this.pieData.map((item) => ({
                    name: item.name,
                    textStyle: {
                        color: item.color,
                    },
                })),
                formatter: (name) => {
                    const find = this.pieData.find((item) => item.name === name);
                    if (find) {
                        return name + "  " + find.rate + "%";
                    }
                    return name;
                },
            },
            tooltip: {
                trigger: "item",
            },
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            labelLine: {
                show: false,
            },
            data: this.pieData,
        };
    }
}
</script>
<style lang="scss">
.large-domain {
    height: 65%;
    flex-grow: 1;
    position: absolute;
    right: 8%;
    top: 16%;
    width: 35%;
    background-color: #193044;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 4px 4px 20px 0px rgba(25, 48, 68, 0.8);
    .panel-title {
        font-size: 16px;
        font-weight: bold;
        color: #eee;
        text-align: center;
    }
    #domainChart {
        width: 100%;
        height: 100%;
    }
}
</style>
